<template>
	<!-- 模块 -->
	<div class="modulePages">
		<!-- 热搜索榜单 -->
		<transition-group
			appear
			name="animate__animated animate__bounce"
			enter-active-class="animate__slideInLeft"
		>
			<HotList key="1"></HotList>
		</transition-group>
		<transition-group
			appear
			name="animate__animated animate__bounce"
			enter-active-class="animate__fadeInRight"
		>
			<RightModule key="2"></RightModule>
		</transition-group>


		<!-- 侧边导航栏 -->
		<div class="cenav">
			<ul>
			    <li>社区</li>
			  	<li>文档</li>
				  <li>服务</li>
			    <li>学习</li>
			    <li>办公</li>
			</ul>
		</div>
		<div class="fixedtool" >
			<div class="giteeLink">
				<a href="https://gitee.com/yuhaowen" target="_blank">Gitee</a>
			</div>
			<div class="back">
				返回
			</div>
		</div>
	</div>

</template>

<script>
	import 'animate.css';
	import HotList from './HotList.vue';
	import RightModule from './RightModule.vue';
	export default{
	    name:"ModulePages",
	    data(){
	        return {}
	    },
		methods:{
		},
		components: {
			HotList,RightModule
		},
		created:function() {
			// console.log("1")
			this.$notify({
				title: '冲突提示',
				message: 'beta版本的devtools会影响v-router跳转',
				type: 'warning',
			});
		}
	}
	import $ from 'jquery'
	$(function(){
		let boxTop = $(".right").offset().top;

		$(window).scroll(function(){
			// console.info($(document).scrollTop());
			if ($(document).scrollTop() >= boxTop){
				$(".fixedtool").fadeIn(500);
			}else {
				$(".fixedtool").fadeOut(1000);
			}
		});

		//返回顶部
		$(".fixedtool").click(function(){
			// $(document).scrollTop(0); 直接返回顶部
			//animate()动画返回
			$("body,html").stop().animate({
				scrollTop:0,
			});
		})

		//节流阀， 互斥锁
		var flag = true;
		$(".cenav li").click(function(){
			//节流阀， 互斥锁
			flag = false;
			// console.info($(this).index());
			// console.info($(".floor .w"));
			//每次点击小i，可以计算页面要的位置
			//选出对应索引号的内容区盒子，计算它的.offset().top
			var current = $(".right .box_module").eq($(this).index()).offset().top;
			//页面滚动效果
			$("body,html").stop().animate({
				scrollTop:current,
			},function() {
				flag = true;
			});

		})
	});


</script>

<style >
	.modulePages{
		position: relative;
		display: block;
		margin: 50px auto 0px;
		width: 1260px;
		/* 使用overflow属性进行清除 浮动带来的父元素height值为0 */
		overflow:hidden;
		padding-top: 10px;
	}
	/* 侧边导航栏 */
	.cenav{
		position: fixed;
		top: 200px;
		left: calc((100% - 1300px) / 2 - 100px);
		width: 60px;
		/* z-index: 99; */
		background-color: #e0eaff;
		border-radius: 10px;
		padding: 8px 6px;
		box-shadow:4px 4px 4px #c8c8c8;
	}
	.cenav li {
	    height: 35px;
	    line-height: 36px;
	    text-align: center;
	    font-size: 13px;
	    cursor: pointer;
	}
	.cenav li:hover{
		color: #FFFFFF;
		background-color: #85caef;
		border-radius: 4px;
	}

	.fixedtool{
		display: none;
		position: fixed;
		width: 40px;
		z-index: 99;
		background-color: #d2d6cd;
		right: 10px;
		bottom: 60px;
	}
	.fixedtool div{
		width: 100%;
		text-align: center;
		height: 40px;
		line-height: 40px;
		background-color: #92b7b9;
		cursor: pointer;
		border-bottom: 3px solid #a5e5b4;
		padding: 5px;
		font-size: 15px;
	}
	.giteeLink a{
		color: #000000;
	}
</style>
